
<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        ref="crud"
        :search.sync="extraParam"
        :page="page"
        :data="tableData"
        :permission="permissionList"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        @search-change="searchChange"
        @search-reset="searchReset"
        @refresh-change="refreshChange"
      >
        <template slot="search">
          <el-col :span="12">
            <el-form-item label="金额范围">
              <el-input-number
                placeholder="最小值"
                style="width: 45%"
                :controls="false"
                v-model="extraParam.transactionAmounStart"
              ></el-input-number>
              -
              <el-input-number
                placeholder="最大值"
                style="width: 45%"
                :controls="false"
                v-model="extraParam.transactionAmounEnd"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </template>
        <template slot="menuLeft">
          <avue-radio
            :button="true"
            v-model="extraParam.bankType"
            :dic="dic"
          ></avue-radio>
        </template>
        <template slot="menuRight">
          <el-button
            type="primary"
            size="small"
            @click="dialogImportVisible = true"
            v-if="
              (extraParam.bankType === 'boc' && permissionList.bocImport)
              ||
              (extraParam.bankType === 'ccb' && permissionList.ccbImport)
            "
          >导入</el-button>
        </template>
      </avue-crud>
    </basic-container>
    <ImportData
      :defaultBank="extraParam.bankType"
      @close="dialogImportVisible = false"
      :dialogImportVisible="dialogImportVisible"
    />
  </div>
</template>

<script>
import { fetchList, tmp } from "@/api/rca/swckbackelectronicbill";
import { tableOption, bankDic,startDate, endDate } from "@/const/crud/rca/swckbackelectronicbill";
import { mapGetters } from "vuex";
import ImportData from "./components/ImportData";

export default {
  name: "swckbackelectronicbill",
  components: {
    ImportData,
  },
  data () {
    return {
      extraParam: {
        bankType: "ccb",
        transactionAmounStart: undefined,
        transactionAmounEnd: undefined,
      },
      dic: bankDic,
      searchForm: {
       recordTime: [startDate, endDate]
      },
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
      },

      tableLoading: false,

      // 上传
      dialogImportVisible: false,
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
    permissionList () {
      return {
        ccbImport: this.vaildData(
          this.permissions.sw_ck_back_electronic_bill_ccb_tmp_import,
          false
        ),
        bocImport: this.vaildData(
          this.permissions.sw_ck_back_electronic_bill_boc_tmp_import,
          false
        ),
      };
    },
    tableOption () {
      const { bankType } = this.extraParam;
      return tableOption[bankType];
    },
    bankType () {
      return this.extraParam.bankType;
    },
  },
  watch: {
    dialogImportVisible: function (val) {
      if (!val) {
        this.refreshChange()
      }
    },
    bankType: function () {
      this.$refs.crud.searchReset();
      this.page.currentPage = 1;
      this.getList(this.page);
    },
  },
  methods: {
    async getList (page, params) {
      this.tableLoading = true;
      try {
        const [startDate, endDate] = this.searchForm.recordTime || [];
        const response = await fetchList(
          Object.assign(
            {
              current: page.currentPage,
              size: page.pageSize,
            },
            params,
            this.searchForm,
            this.extraParam,
            {
              startDate,
              endDate,
            }
          )
        );
        this.tableData = response.data.data.records;
        this.page.total = response.data.data.total;
        this.tableLoading = false;
        this.$nextTick(() => {
          this.$refs.crud.doLayout();
        });
      } catch (e) {
        this.tableLoading = false;
      }
    },
    async searchChange (form, done) {
      this.searchForm = { ...form };
      try {
        await this.getList(this.page, this.searchForm);
      } finally {
        done();
      }
    },
    refreshChange () {
      this.getList(this.page);
    },
    searchReset () {
      Object.assign(this.extraParam, {
        transactionAmounStart: undefined,
        transactionAmounEnd: undefined,
      });

      this.page.currentPage = 1
      this.getList(this.page);
    },
  },
};
</script>
